import styles from './index.less';
import classnames from 'classnames';

const LeakyPreloader: React.FC = () => {
  return (
    <div className={styles.parent}>
      <div className={classnames(styles.weather, styles.weather_sun)}>
        <div className={styles.icon}>
          <div className={styles.icon__sun}>
            <div className={styles.icon__sun_lights}>
              <div className={styles.icon__sun_light}></div>
              <div className={styles.icon__sun_light}></div>
              <div className={styles.icon__sun_light}></div>
              <div className={styles.icon__sun_light}></div>
              <div className={styles.icon__sun_light}></div>
              <div className={styles.icon__sun_light}></div>
              <div className={styles.icon__sun_light}></div>
              <div className={styles.icon__sun_light}></div>
            </div>
          </div>
          <div className={styles.icon__cloud}>
            <div
              className={classnames(styles.icon__cloud_reflect, styles.icon__cloud_reflect__1)}
            ></div>
            <div
              className={classnames(styles.icon__cloud_reflect, styles.icon__cloud_reflect__2)}
            ></div>
            <svg
              className={styles.icon__cloud_svg}
              xmlns="http://www.w3.org/2000/svg"
              xmlnsXlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 200 500"
              width="50%"
            >
              <clipPath id="cloud-path">
                <path
                  d=" M 146.5 293 C 65.644 293 0 227.356 0 146.5 C 0 65.644 65.644 0 146.5 0 C 205.641 0 256.643 35.12 279.772 85.624 C 293.416 79.445 308.559 76 324.5 76 C 384.383 76 433 124.617 433 184.5 C 433 244.383 384.383 293 324.5 293 L 324.5 293 C 324.5 293 324.5 293 324.5 293 L 146.5 293 Z "
                  fill="currentColor"
                />
              </clipPath>
            </svg>
          </div>
          <div className={styles.icon__cloud_shadow}></div>
        </div>
      </div>

      <div className={classnames(styles.weather, styles.weather__thunder)}>
        <div className={styles.icon}>
          <div className={styles.icon__rain}>
            <div className={styles.icon__rain_drops}></div>
          </div>
          <div className={styles.icon__thunder}></div>
          <div className={styles.icon__cloud}>
            <div
              className={classnames(styles.icon__cloud_reflect, styles.icon__cloud_reflect__1)}
            ></div>
            <div
              className={classnames(styles.icon__cloud_reflect, styles.icon__cloud_reflect__2)}
            ></div>
            <svg
              className={styles.icon__cloud_svg}
              xmlns="http://www.w3.org/2000/svg"
              xmlnsXlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 200 500"
              width="50%"
            >
              <clipPath id="cloud-path">
                <path
                  d=" M 146.5 293 C 65.644 293 0 227.356 0 146.5 C 0 65.644 65.644 0 146.5 0 C 205.641 0 256.643 35.12 279.772 85.624 C 293.416 79.445 308.559 76 324.5 76 C 384.383 76 433 124.617 433 184.5 C 433 244.383 384.383 293 324.5 293 L 324.5 293 C 324.5 293 324.5 293 324.5 293 L 146.5 293 Z "
                  fill="currentColor"
                />
              </clipPath>
            </svg>
          </div>
          <div className={styles.icon__cloud_shadow}></div>
        </div>
      </div>

      <div className={classnames(styles.weather, styles.weather__snow)}>
        <div className={styles.icon}>
          <div className={styles.icon__snow}>
            <div className={styles.icon__snow_flakes}></div>
          </div>
          <div className={styles.icon__cloud}>
            <div
              className={classnames(styles.icon__cloud_reflect, styles.icon__cloud_reflect__1)}
            ></div>
            <div
              className={classnames(styles.icon__cloud_reflect, styles.icon__cloud_reflect__2)}
            ></div>
            <svg
              className={styles.icon__cloud_svg}
              xmlns="http://www.w3.org/2000/svg"
              xmlnsXlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 200 500"
              width="50%"
            >
              <clipPath id="cloud-path">
                <path
                  d=" M 146.5 293 C 65.644 293 0 227.356 0 146.5 C 0 65.644 65.644 0 146.5 0 C 205.641 0 256.643 35.12 279.772 85.624 C 293.416 79.445 308.559 76 324.5 76 C 384.383 76 433 124.617 433 184.5 C 433 244.383 384.383 293 324.5 293 L 324.5 293 C 324.5 293 324.5 293 324.5 293 L 146.5 293 Z "
                  fill="currentColor"
                />
              </clipPath>
            </svg>
          </div>
          <div className={styles.icon__cloud_shadow}></div>
        </div>
      </div>

      <div className={classnames(styles.weather, styles.weather__rainbow)}>
        <div className={styles.icon}>
          <div className={styles.icon__rainbow}>
            <div className={styles.icon__rainbow__arc}></div>
            <div className={styles.icon__rainbow__arc}></div>
            <div className={styles.icon__rainbow__arc}></div>
            <div className={styles.icon__rainbow__arc}></div>
            <div className={styles.icon__rainbow__arc}></div>
            <div className={styles.icon__rainbow__arc}></div>
            <div className={styles.icon__rainbow__arc}></div>
          </div>
          <div className={styles.icon__cloud}>
            <div
              className={classnames(styles.icon__cloud_reflect, styles.icon__cloud_reflect__1)}
            ></div>
            <div
              className={classnames(styles.icon__cloud_reflect, styles.icon__cloud_reflect__2)}
            ></div>
            <svg
              className={styles.icon__cloud_svg}
              xmlns="http://www.w3.org/2000/svg"
              xmlnsXlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 200 500"
              width="50%"
            >
              <clipPath id="cloud-path">
                <path
                  d=" M 146.5 293 C 65.644 293 0 227.356 0 146.5 C 0 65.644 65.644 0 146.5 0 C 205.641 0 256.643 35.12 279.772 85.624 C 293.416 79.445 308.559 76 324.5 76 C 384.383 76 433 124.617 433 184.5 C 433 244.383 384.383 293 324.5 293 L 324.5 293 C 324.5 293 324.5 293 324.5 293 L 146.5 293 Z "
                  fill="currentColor"
                />
              </clipPath>
            </svg>
          </div>
          <div className={styles.icon__cloud_shadow}></div>
        </div>
      </div>
    </div>
  );
};

export default LeakyPreloader;
